import React from "react"
import seachStyle from "./seach.module.css"
import { SearchBar } from 'antd-mobile';

class SeachInput extends React.Component {
  // state = {
  //   value: '美食',
  // }
  // componentDidMount() {
  //   this.autoFocusInst.focus();
  // }
  // onChange= (value) => {
  //   this.setState({ value });
  // };
  // clear = () => {
  //   this.setState({ value: '' });
  // }
  // handleClick = () => {
  //   this.manualFocusInst.focus();
  // }
  constructor(props) {
    super(props)
    this.state = {
      val: ""
    }
  }
  handleval(e) {
    this.setState({
      val: e
    })
    console.log(this.state.val)
  }
  render() {
    return (<div>
      {/* <WingBlank><div className="sub-title">Normal</div></WingBlank> */}
      <SearchBar className={seachStyle.secipt} placeholder="搜索" maxLength={8} onChange={this.handleval.bind(this)} />
      {/* <WhiteSpace /> */}

      {/* <WingBlank><div className="sub-title">AutoFocus when enter page</div></WingBlank>
      <SearchBar placeholder="自动获取光标" ref={ref => this.autoFocusInst = ref} />
      <WhiteSpace />

      <WingBlank><div className="sub-title">Focus by operation</div></WingBlank>
      <SearchBar
        placeholder="手动获取获取光标"
        ref={ref => this.manualFocusInst = ref}
      />
      <WhiteSpace /> */}

      {/* <WingBlank>
        <Button
          onClick={this.handleClick}
        >click to focus</Button>
      </WingBlank>
      <WhiteSpace /> */}

      {/* <WingBlank><div className="sub-title">Show cancel button</div></WingBlank>
      <SearchBar
        value={this.state.value}
        placeholder="Search"
        onSubmit={value => console.log(value, 'onSubmit')}
        onClear={value => console.log(value, 'onClear')}
        onFocus={() => console.log('onFocus')}
        onBlur={() => console.log('onBlur')}
        onCancel={() => console.log('onCancel')}
        showCancelButton
        onChange={this.onChange}
      /> */}
    </div>);
  }
}


export default SeachInput